<template>
  <div class="content">
    <div class="head">
      <span >用户管理</span>
    </div>
    <div class="content_main">
      <Row class="search"> 
      <Col span="2">
        <Button style="position:relative;left:10px" type="primary" @click="add">新增</Button>
      </Col>      
      <Col span="22" class="search_input">
        <div class="item">
          <label>用户名</label>
          <Input v-model="searchusername" placeholder="用户名" style="width: 200px"></Input>
        </div>
        <div class="item">
          <label>用户类型</label>
          <Select v-model="searchtype" style="width:200px">
            <Option value="">所有用户</Option>
            <Option value="1">中心用户</Option>
            <Option value="2">管理部用户</Option>
          </Select>
        </div>
      </Col>
        <Button type="primary" icon="ios-search" @click="initData">查询</Button>
    </Row>
    <Table class="marginTop10" stripe border :loading="loading" :columns="columns1" :data="data1"></Table>
    <Page class="pager" :total="totalSize" :current="page" :page-size="pageSize" @on-change="pageNum" @on-page-size-change="pageSizeChange" show-sizer></Page>

    <Modal v-model="modal1" title="用户管理" @on-ok="ok" @on-cancel="cancel" cancel-text="取消" ok-text="确定">
      <Form label-position="left" :label-width="70" v-model="formItem">
        <FormItem label="用户名">
          <Input v-model="formItem.username" placeholder="用户名"></Input>
        </FormItem>
        <FormItem label="真实姓名">
          <Input v-model="formItem.realName" placeholder="真实姓名"></Input>
        </FormItem>
        <FormItem label="用户类型">
          <Select v-model="formItem.usertype" placeholder="选择用户类型">
            <Option value="1">中心用户</Option>
            <Option value="2">管理部用户</Option>
          </Select>
        </FormItem>

        <FormItem label="密码">
          <Input v-model="formItem.password" placeholder="密码"></Input>
        </FormItem>
        <FormItem label="手机号码">
          <Input v-model="formItem.mobile" placeholder="手机号码"></Input>
        </FormItem>
        <FormItem label="固定电话">
          <Input v-model="formItem.telephone" placeholder="固定电话"></Input>
        </FormItem>
        <FormItem label="电子邮箱">
          <Input v-model="formItem.email" placeholder="电子邮箱"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="modal2" title="是否删除管理员" @on-cancel="deleteCancel" @on-ok="deleteOk" cancel-text="取消" ok-text="确定">
      <p>是否确认删除用户</p>
    </Modal>
    <Modal v-model="checkModal" title="管理员角色" @on-cancel="checkCancel" @on-ok="checkOk" cancel-text="取消" ok-text="确定">
      <CheckboxGroup v-model="checkAllGroup" @on-change="checkGroupChange">
        <Checkbox :label="item.id" :key="index" v-for="(item,index) in roleArray" v-if="roleArray.length!=0">
          <span>{{item.roleName}}</span>
        </Checkbox>
      </CheckboxGroup>
    </Modal>
    </div>
     
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchtype:'',
      searchusername:"",
      formItem: {
        createTime: "",
        email: "",
        id: "",
        mobile: "",
        password: "",
        realName: "",
        telephone: "",
        username: "",
        usertype:"",
      },
      totalSize: 0,
      pageSize: 20,
      page: 1,
      id: "",
      modal1: false,
      modal2: false,
      checkModal: false,
      roleArray: [],
      checkAllGroup: [],
      loading: true,
      editOrAdd: false,
      columns1: [
        {
          title: "用户名",
          key: "username",
          align: "center"
        },
        {
          title: "真实姓名",
          key: "realName",
          align: "center",
          width: 100,
        },
        {
          title: "用户类型",
          key: "usertype",
          align: "center",
          render: (h, params) => {
              let zt = params.row.usertype;
              if (zt == "1") {
                return h('span','中心用户')
              }else{
                return h('span',' 管理部用户')
              }
          },
          width: 100,
        },
        {
          title: "手机号码",
          key: "mobile",
          align: "center",
          width: 130,
        },
        {
          title: "电话号码",
          key: "telephone",
          align: "center",
          width: 130,
        },
        {
          title: "电子邮箱",
          key: "email",
          align: "center"
        },
        {
          title: "登录时间",
          key: "tokenCreateTime",
          align: "center",
          width: 150,
        },
        {
          title: "操作",
          key: "action",
          width: 230,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.check(params.row);
                    }
                  }
                },
                "权限"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delete(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      this.$http.post("/api/auth/sysuser/doGetList",{
        pageNum: this.page,
        pageSize: this.pageSize,
        username: this.searchusername,
        usertype: this.searchtype,
      }).then(res => {
        this.data1 = res.retBody.list;
        this.pageSize = res.retBody.pageSize;
        this.totalSize = res.retBody.total;
        this.loading = false;
      });
    },
    /**
     * 添加角色
     */
    add() {
      this.modal1 = true;
      this.editOrAdd = true;
      //点击新增的时候先清除表单
      for (let o in this.formItem) {
        this.formItem[o] = "";
      }
    },
    /**
     * 添加用户
     */
    addUser() {
      const self = this;
      let formdata = new FormData(); //form表单提交
      for (let o in this.formItem) {
        formdata.append(o, this.formItem[o]);
      }
      this.$http.post("/api/auth/sysuser/doSave", this.formItem)
      .then(res => {
        if (res.retHead.code == "0000000") {
          self.$Message.success({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        } else {
          self.$Message.warning({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        }
        this.initData();
      });
    },
    /**
     * 编辑
     */
    edit(row) {
      //点击编辑
      for (let o in this.formItem) {
        if (o == "password") {
          this.formItem[o] = "";
        } else {
          this.formItem[o] = row[o];
        }
      }

      this.id = row.id;
      this.modal1 = true;
      this.editOrAdd = false;
    },
    /**
     * 编辑提交
     */
    editSubmit() {
      const self = this;
      this.$http.post("/api/auth/sysuser/doMod", this.formItem).then(res => {
        if (res.retHead.code == "0000000") {
          this.$Message.success({
            top: 100,
            duration: 1,
            content: res.retHead.message
          });
        } else {
          this.$Message.warning({
            top: 100,
            duration: 1,
            content: res.retHead.message
          });
        }
        this.initData();
      });
    },
    /**
     * 弹出弹出框
     */
    delete(row) {
      this.id = row.id; //获取点击删除管理员的id;
      this.modal2 = true;
    },
    ok() {
      if (this.editOrAdd) {
        this.addUser();
      } else {
        this.editSubmit();
      }
    },
    cancel() {},
    deleteCancel() {},
    /**
     *删除管理员
     */
    deleteOk() {
      this.$http.post("/api/auth/sysuser/doDel", { id: this.id }).then(res => {
        if (res.retHead.code == "0000000") {
          this.$Message.success({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        } else {
          this.$Message.warning({
            top: 100,
            duration: 3,
            content: res.retHead.message
          });
        }
        this.initData();
      });
    },
    /**
     * 改变页码或者改变每页条数
     */
    chagePageOrPagesize() {
      this.$http
        .post("/api/auth/sysuser/doGetList", {
          pageNum: this.page,
          pageSize: this.pageSize,
          username: this.searchusername,
          usertype: this.searchtype,
        })
        .then(res => {
          this.data1 = res.retBody.list;
          this.pageSize = res.retBody.pageSize;
          this.page = res.retBody.pageNum;
          this.totalSize = res.retBody.total;
          this.loading = false;
        });
    },
    /**
     * 改变页码
     */
    pageNum(page) {
      this.loading = true;
      this.page = page;
      this.chagePageOrPagesize();
    },
    /**
     * 改变每页的条数
     */
    pageSizeChange(pageSize) {
      this.loading = true;
      this.pageSize = pageSize;
      this.chagePageOrPagesize();
    },
    /**
     * 查看
     */
    check(row) {
      this.checkAllGroup = [];
      this.getAllRole(row.id);
      this.id = row.id;
      this.checkModal = true;
      this.$http
        .post("/api/auth/sysrole/doGetListByUserId", { userId: this.id })
        .then(res => {
          console.log(res);
          if (res.retBody.length == 0) {
            this.checkAllGroup = [];
          } else if (res.retBody.length >= 1) {
            for (let i = 0, len = res.retBody.length; i < len; i++) {
              this.checkAllGroup.push(res.retBody[i].id);
            }
          }
        });
    },
    checkCancel() {},
    checkOk() {
      const self = this;
      this.$http
        .post("/api/auth/sysuser/doAddUserRole", {
          userId: this.id,
          roleIds: this.checkAllGroup.toString()
        })
        .then(res => {
          console.log(res);
          if (res.retHead.code == "0000000") {
            self.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            self.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          this.roleArray = res.retBody;
        });
    },
    /**
     * 获取所有角色
     */
    getAllRole(id) {
      this.$http.post("/api/auth/sysrole/doGetList").then(res => {
        this.roleArray = res.retBody;
      });
    },
    /**
     * 权限选择
     */
    checkGroupChange() {
      console.log(this.checkAllGroup);
    },
  }
};
</script>

